<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面时间</title>
    <style>
        h1{
            margin-top: 100px;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1 id="time">2024-10-16 12:12:12</h1>
    <script>
        let h1ELe = document.getElementById("time");
        // 封装补零函数
        function fillZero(num) {
            num = parseInt(num);
            return num < 10 ? "0" + num : num;
        }

        setInterval(function(){
            // 获取时间对象
            const date = new Date();
            let years = date.getFullYear();
            let months = date.getMonth() + 1;
            let dates = date.getDate();
            let hours = date.getHours();
            let minutes = date.getMinutes();
            let seconds = date.getSeconds();
            let timeStr = fillZero(years) + "-" +
                          fillZero(months) + "-" +
                          fillZero(dates) + " " +
                          fillZero(hours) + ":" +
                          fillZero(minutes) + ":" +
                          fillZero(seconds);
            h1ELe.innerText = timeStr;

        },1000);
    </script>
</body>
</html>